<template>
  <div class="editUser page">
    <van-nav-bar
        title="修改密码"
        left-arrow
        @click-left="$router.back()"
        @click-right="submit"
    >
      <template #right>
        <span :style="allowSubmit ? 'color: #fa59b5' : ''">保存</span>
      </template>
    </van-nav-bar>
    <div ref="pass" class="user">
      <van-field label-width="1.2rem" v-model="oldPass" :type="cssList[0] ? 'password' : 'text'" clearable
                 placeholder="请输入旧密码" :right-icon="!cssList[0] ? hiddenCss : showCss"
                 @click-right-icon="showPassword(0)"/>
      <van-field label-width="1.2rem" v-model="newPass" :type="cssList[1] ? 'password' : 'text'" clearable
                 placeholder="请输入新密码"
                 :right-icon="!cssList[1] ? hiddenCss : showCss" @click-right-icon="showPassword(1)"/>
      <van-field label-width="1.2rem" v-model="conPass" :type="cssList[2] ? 'password' : 'text'" clearable
                 placeholder="请输入确认密码"
                 :right-icon="!cssList[2] ? hiddenCss : showCss" @click-right-icon="showPassword(2)"/>
    </div>
  </div>
</template>
<script>
import {Toast} from "vant";
import {updatePassword, updateUserInfo} from "@api/User";

export default {
  name: "EditPassword",
  computed: {
    allowSubmit: function () {
      return this.oldPass && this.newPass && this.conPass && this.newPass === this.conPass;
    }
  },
  data: function () {
    return {
      cssList: [true, true, true],
      showCss: "iconfont iconfont-ycma right-icon",
      hiddenCss: "iconfont iconfont-xsma right-ico",
      radio: "0",
      oldPass: "",
      newPass: "",
      conPass: ""
    }
  },
  methods: {
    showPassword: function (num) {
      let newList = [this.cssList[0], this.cssList[1], this.cssList[2]];
      newList[num] = !newList[num];
      this.cssList = newList;
    },
    submit: function () {
      if(!this.allowSubmit) return ;
      let that = this;
      Toast.loading({
        message: "密码修改中, 请稍等片刻",
        duration: 0,
        forbidClick: false,
        onOpened: function () {
          updatePassword({
            old_password: that.oldPass,
            new_password: that.newPass
          }).then(() => {
            Toast.clear();
            Toast.success({
              message: "密码修改成功",
              duration: 2000
            })
          }).catch(() => {
            Toast.clear();
          })
        }
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-field__right-icon > i, ::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.editUser {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
}

.editUser .user {
  font-size: .37333rem;
  color: #000;
  padding: 0 .37333rem;
}

</style>
